<template>
    <div style="margin-top: 60px;">
        <el-row>
            <el-col :md="10" :offset="7">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item
                        label="登录用户名"
                        prop="login_name"
                    >
                        <el-input v-model="ruleForm.login_name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="中文名"
                        prop="chinese_name"
                    >
                        <el-input v-model="ruleForm.chinese_name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="密码"
                        prop="password"
                    >
                        <el-input v-model="ruleForm.password" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="角色"
                    >
                        <el-input v-model="ruleForm.role" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="邮箱"
                        prop="email"
                    >
                        <el-input type="email"  v-model="ruleForm.email" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="联系电话"
                        prop="phone_number"
                    >
                        <el-input  v-model="ruleForm.phone_number" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>

</template>
<script>
    export default {
    data() {
      return {
        ruleForm: {
            login_name: '',
            chinese_name: '',
            password: '',
            role: '管理员',
            email: '',
            phone_number: ''
        },
        rules: {
          login_name: [
            { required: true, message: '请输入登录用户名', trigger: 'blur' }
          ],
          chinese_name: [
            { required: true, message: '请输入中文名', trigger: 'blur' }
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur' }
          ],
          email: [
            {type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }
          ],
          phone_number: [
            { required: true, message: '请输入电话号码', trigger: 'blur' }
          ]
        }
      };
    },
    created() {
        // this.getData()
        if (this.$route.name == 'admin_form') {
            this.ruleForm.role = '管理员'
        } else if (this.$route.name == 'sales_form') {
            this.ruleForm.role = '销售'
        } else if (this.$route.name == 'customer_service_form') {
            this.ruleForm.role = '客服'
        } else if (this.$route.name == 'finance_form') {
            this.ruleForm.role = '财务'
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // if (this.$route.fullPath == '/carriers/new') {
                    //     this.$axios.post('/api/carriers',
                    //         {
                    //             name: this.ruleForm.name,
                    //             contact_person: this.ruleForm.contact_person,
                    //             email: this.ruleForm.email,
                    //             phone_number: this.ruleForm.phone_number,
                    //             carrier_type: this.ruleForm.carrier_type
                    //         }
                    //     ).then((res) => {
                    //         this.$store.commit('setAlert', res.data)
                    //         this.$router.push({
                    //             path: '/carriers'
                    //         })
                    //     })
                    // } else {
                    //     this.$axios.put(
                    //         `/api/carriers/${this.$route.query.id}`,
                    //          {
                    //             name: this.ruleForm.name,
                    //             contact_person: this.ruleForm.contact_person,
                    //             email: this.ruleForm.email,
                    //             phone_number: this.ruleForm.phone_number,
                    //             carrier_type: this.ruleForm.carrier_type
                    //         }
                    //     ).then((res) => {
                    //         this.$store.commit('setAlert', res.data)
                    //         this.$router.push({
                    //                 path: '/carriers'
                    //         })
                    //     })
                    // }
                    console.log(1111)
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.$router.push({
                path: '/carriers'
            })
        },
        // getData() {
        //     this.$axios.get(`/api/carriers/${this.$route.query.id}/edit`).then((res) => {
        //         this.ruleForm.name = res.data.name
        //         this.ruleForm.carrier_type = res.data.carrier_type
        //         this.ruleForm.contact_person = res.data.contact_person
        //         this.ruleForm.email = res.data.email
        //         this.ruleForm.phone_number = res.data.phone_number
        //     })
        // }
    }
}
</script>
<style lang="scss" scoped>
    .select {
        width: 100%;
    }
</style>

